<template>
  <PageWrapper dense contentClass="p-16px">
    <CollapseContainer title="订单信息">
      <BasicForm @register="registerForm"></BasicForm>
    </CollapseContainer>
    <productEdit ref="productEditRef" />
    <remarkEdit ref="remarkEditRef" />
    <!-- <fileEdit ref="fileEditRef" /> -->
    <div class="flex justify-end gap-8px mt-8px">
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
import { BasicForm, useForm } from '@/components/Form';
import { ref, onMounted, reactive } from 'vue';
import { addSaleOrderRefund, updateSaleOrderRefund, getSaleOrderRefund } from '@/api/sale/orderRefund';
import { drawerSchemas } from './orderRefund.data';
import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '@/components/Page';
import productEdit from './components/productEdit.vue';
import remarkEdit from './components/remarkEdit.vue';
// import fileEdit from './components/fileEdit.vue';
import { useTabs } from '@/hooks/web/useTabs';
import { useGo } from '@/hooks/web/usePage';
import { PageEnum } from '@/enums/pageEnum';
defineOptions({ name: 'saleOrderEdit' });
import { useRoute } from 'vue-router';
const { closeCurrent, setTitle } = useTabs();
/** 拿到路由的id */
const route = useRoute();
const isUpdate = (route.query.type as string) === 'update';
const id = route.query.id as string;
document.title = isUpdate ? '编辑退款订单' : '新增退款订单';
setTitle(document.title);
const go = useGo();
const emit = defineEmits(['register', 'reload']);

const [registerForm, { setFieldsValue, resetForm, validate }] = useForm({
  // layout: 'vertical',
  labelWidth: 100,
  name: 'user-drawer',
  showActionButtonGroup: false,
  baseColProps: { span: 12 },
  schemas: drawerSchemas,
});
const productEditRef = ref();
// const fileEditRef = ref();
const remarkEditRef = ref();
async function handleSubmit() {
  const productEditData = await productEditRef.value?.handleSubmit();
  // const fileEditData = await fileEdit.value?.handleSubmit();
  const remarkEditData = await remarkEditRef.value?.handleSubmit();
  if (
    !productEditData ||
    // !fileEditData ||
    !remarkEditData
  )
    return;
  try {
    const data = {
      ...(await validate()),
      // ...fileEditData,
      ...remarkEditData,
      status: 1,
      customerAddressId: '666666',
      list: productEditData.list.map((item: any) => {
        return {
          ...item,
          amount: item.num * item.price
        }
      })
    };

    if (isUpdate) {
      await updateSaleOrderRefund(data);
    } else {
      const res = (await addSaleOrderRefund(data)) as any;
      state.id = res;
    }
    handleCancel();
  } catch (e) {
    console.log('e', e);
  } finally {
  }
}

async function handleCancel() {
  resetForm();
  closeCurrent();
  go({ path: '/sale/orderRefund' as PageEnum });
}
const state = reactive({
  id: '',
  userList: [],
  customerList: [],
  orderList: [],
});
const getUserInfo = async () => {
  const res = (await getSaleOrderRefund(id)) as any;
  res.customerTransactionId = res.customerTransactionId ? Number(res.customerTransactionId) : '';
  state.id = res.id;
  setFieldsValue(res);
  productEditRef.value?.setFormData(res);
  // fileEditRef.value?.setFormData(res);
  remarkEditRef.value?.setFormData(res);
};
onMounted(() => {
  id && getUserInfo();
});
</script>

<style lang="less" scoped>
:deep(.ant-tag) {
  margin-right: 6px;
  margin-bottom: 6px;
}
</style>
